*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
html,body{
	width: 100%;
	height: 100%;
}
body{
	background: #bdb7aa;
	background-size: cover;
	color: #000;
}
.progress{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9;
	background: #f6f3ed; 
}
.container{
	position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: 640px;
    margin-left: -320px;
    overflow: hidden;
}
.pages,
.page{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
}
.page{
	position: relative;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.page .cover{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
}
.page:nth-of-type(1){
	background-image: url(../img/p1.jpg)
}
.page:nth-of-type(2){
	background-image: url(../img/p2.jpg)
}
.page:nth-of-type(3){
	background-image: url(../img/p3.jpg)
}
.page:nth-of-type(4){
	background-image: url(../img/p4.jpg)
}
.page:nth-of-type(5){
	background-image: url(../img/p5.jpg)
}
.page:nth-of-type(6){
	background-image: url(../img/p6.jpg)
}
.item{
	position: absolute;
	top: 50%;
	left: 50%;
}
.item .dot{
	position: relative;
	z-index: 2;
	width: 20px;
	height: 20px;
	background: #21cace;
	border-radius: 100%;
}
.item .dot:before{
	position: absolute;
	z-index: 2;
	content: '';
	display: block;
	top: 50%;
	left: 50%;
	margin-left: -10px;
	margin-top: -10px;
	width: 20px;
	height: 20px;
	background: #21cace;
	border-radius: 100%;
}
.item .dot:after{
	position: absolute;
	content: '';
	display: block;
	top: 50%;
	left: 50%;
	margin-left: -20px;
	margin-top: -20px;
	width: 40px;
	height: 40px;
	background: rgba(24, 141, 144, 0.8);
	border-radius: 100%;
}
.item .info{
	/*display: none;*/
	position: absolute;
	top: -10px;
	left: -5px;
	padding: 10px 15px 10px 30px;
	font-size: 24px;
	background: rgba(0, 0, 0, .5);
	border-radius: 10px;
	width: 189px;
}
.item .info a{
	color: #fff;
	text-decoration: none;
}
.item .info span{
	display: block;
	text-align: center;
}
.item.active .info{
	display: block;
}
.next{
	position: absolute;
	width: 42px;
	height: 23px;
	left: 50%;
	bottom: 5%;
	margin-left: -21px;
	background: url(../img/next.png) no-repeat;
}
.next{
	animation: start 1s infinite;
	-webkit-animation: start 1s infinite;
}
.item .dot:after{
	animation: pulse 2s ease-out infinite;
	-webkit-animation: pulse 2s ease-out infinite;
}
@keyframes start {
    from { opacity: 1; }
    to { opacity: 0; transform: translate3d(0,15px,0); }
}
@-webkit-keyframes start {
    from { opacity: 1; }
    to { opacity: 0; -webkit-transform: translate3d(0,15px,0); }
}
@keyframes pulse {
  0% { transform: scale(0); opacity: 0.0; }
  25% { transform: scale(0); opacity: 0.1; }
  50% { transform: scale(0.1); opacity: 0.5; }
  75% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1); opacity: 0.0; }
}
@-webkit-keyframes pulse {
  0% { -webkit-transform: scale(0); opacity: 0.0; }
  25% { -webkit-transform: scale(0); opacity: 0.1; }
  50% { -webkit-transform: scale(0.1); opacity: 0.5; }
  75% { -webkit-transform: scale(0.5); opacity: 1; }
  100% { -webkit-transform: scale(1); opacity: 0.0; }
}